<template>
  <div id="leftbottom">
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  computed: {
    emotionsData() {
      return this.$store.state.emotionsData;
    }
  },
  watch: {
    emotionsData: {
      handler(newVal) {
        // 更新图表数据
        this.myChart.setOption({
          series: [{
            data: Object.keys(newVal).map(key => ({
              value: newVal[key],
              name: key
            }))
          }]
        });
      },
      deep: true
    }
  },
  
  mounted() {
    var chartDom = document.getElementById('leftbottom');
    this.myChart = echarts.init(chartDom, 'vintage'); // 使用 this 引用 myChart
    // 假设四川省的初始情感数据如下，你需要根据实际情况获取数据
    const defaultEmotionsData = {
      '喜': 200,
      '怒': 40,
      '哀': 50,
      '乐': 60,
      '悲': 130,
      '思':45,

    };
    var option = {
      title: {
        //text: '情感分析', // 添加标题
        left: 'center', // 标题居中
        top: 0, // 标题顶部位置
        textStyle: {
          fontSize: 26, // 标题字体大小
          fontWeight: 'bold', // 标题字体粗细
          color: '#333' // 标题字体颜色
        }
      },
      tooltip: {//信息提示框的触发方式和显示内容。
        trigger: 'item'
      },
      legend: {//定义了图例的位置和样式。
        top: '15%',
        left: 'center'
      },
      series: [
        {
          name: '情感分析',
          type: 'pie',
          radius: ['40%', '70%'], // 增大图表
          center: ['50%', '65%'], // 调整饼图在容器中的位置，这里以容器中心偏下为
          avoidLabelOverlap: false,
          label: {
            show: false,
            // normal 状态下的标签样式
            normal: {
              position: 'center', // 标签显示在扇区内部
              show:false
              // 其他样式配置
            }
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false
          },
          
        }
      ]
    };
    // this.$store.dispatch('selectProvince', '四川');//初始时显示四川
    // this.$store.commit('setEmotionsData', defaultEmotionsData);
    this.myChart.setOption(option);
    window.addEventListener('resize', () => {
      this.myChart.resize(); // 使用 this 引用 myChart
    });
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.myChart.resize(); // 确保正确引用 myChart
    });
  }
};
</script>

<style scoped>
#leftbottom {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Arial', sans-serif;
}
</style>